<template>
	<view class="container" v-if='WEBCONFIG.game_system'
		:style="'background-image: url(' + WEBCONFIG.game_system.game_image + ');'">
		<uni-nav-bar @clickLeft='back' status-bar leftIcon='left' :title="'第'+game.level+'关'"
			backgroundColor='transparent' :border='false' color="#2b2b2b"></uni-nav-bar>

		<view class="level flex flex-column flex-y-center">
			<view class="level-title h5 font-weight-600">{{game.title}}</view>
			<view class="level-title second h5 font-weight-600 flex flex-row flex-y-center">
				{{countdownSecond}}s
			</view>
		</view>
		<view class="p-3 content mt-4" v-if='form.types==1'>
			<canvas canvas-id="canvasId" :style="{height:imageInfo.height+'px',width:imageInfo.width+'px'}"
				@click="CanvasClick"></canvas>
		</view>
		<view class="p-3 content mt-4" v-else-if='form.types==2'>
			<canvas canvas-id="canvasId" :style="{height:imageInfo.height+'px',width:imageInfo.width+'px'}"
				@click="CanvasClick"></canvas>
			<canvas canvas-id="canvasIds" class="mt-2"
				:style="{height:imageInfo1.height+'px',width:imageInfo1.width+'px'}" @click="Canvas1Click"></canvas>
		</view>

		<view class="p-3 content mt-4 flex flex-center" v-else-if='form.types==3'>
			<view :style="{width:(rowNum*42)+'px;',height:(Math.ceil(game.num/rowNum))*42 + 'px;'}">
				<uni-transition ref="ani" :show='show'>
					<view class="grid" :class="['grid-sqrt-'+rowNum]">
						<view v-for="(item,index) in dataList" class="item flex flex-center"
							:class="item.play==true?item.class:''" @click="onClick(item,index)">
							<view class="item-text flex flex-center">{{item.text}}</view>
						</view>
					</view>
				</uni-transition>
			</view>
		</view>
		<view class="p-3 content mt-4 flex flex-column flex-center" v-else-if='form.types==8'>
			<image v-if='game.image' :src='game.image'></image>
			<view v-if='option.length>0' class='w-100 flex flex-center flex-column'>
				<view class="option text-white text-shadow flex flex-center p-3 mt-3 w-70"
					v-for="(itme,index) in option" :key='index' @click="answerText=itme.value;submitAnswer()">
					{{itme.value}}
				</view>
			</view>
			<view v-else class="flex flex-column flex-center p-4 w-100">
				<input class="w-70 answer" placeholder="输入答案" v-model='answerText' />
				<button class='sub-btn text-white mt-5' @click="submitAnswer">
					提交答案
				</button>
			</view>
		</view>
		<view class="p-3 content mt-4 flex flex-column flex-center" v-else>
			<image :src='game.image'></image>
			<view class="flex flex-column flex-center p-4 w-100">
				<input class="w-70 answer" placeholder="输入答案" v-model='answerText' />
				<button class='sub-btn text-white mt-5' @click="submitAnswer">
					提交答案
				</button>
			</view>
		</view>
		<view class="footer flex flex-row flex-x-center flex-x-space-between mt-10 mb-10">
			<view class="tip btn text-white h9 font-weight-600" @click="playAudio(WEBCONFIG.audio.beat);playAd(1)">
				提示
				<uni-icons type='videocam-filled' color="#fff"></uni-icons>
			</view>
			<view class="refresh btn text-white h9 font-weight-600" @click="playAudio(WEBCONFIG.audio.beat);replay()">
				重玩
				<uni-icons type='refreshempty' color="#fff"></uni-icons>
			</view>
			<view class="jump btn text-white h9 font-weight-600" @click="playAudio(WEBCONFIG.audio.beat);playAd(2)">
				跳过
				<uni-icons type="arrow-right" color="#fff"></uni-icons>
			</view>
		</view>


		<!-- #ifdef MP-WEIXIN -->
		<cover-view v-if='popupRefSuccess' class="popup flex flex-center">
			<cover-view class="correctpopup">
				<cover-image class="bg-image" :src="WEBCONFIG.success_image"></cover-image>
				<cover-view class="title h5">通关用时:{{victorySecond}}s</cover-view>
				<cover-view class="button flex flex-x-space-between">
					<cover-image class="replay" @click="replay();playAudio(WEBCONFIG.audio.beat)" :src='WEBCONFIG.re_image'>
					</cover-image>
					<cover-image class="next" @click="playAudio(WEBCONFIG.audio.beat);next()" :src='WEBCONFIG.next_image'>
					</cover-image>
				</cover-view>
			</cover-view>
		</cover-view>

		<cover-view v-if='popupRefError' class="popup flex flex-center">
			<cover-view class="correctpopup">
				<cover-image class="bg-image" :src="WEBCONFIG.error_image"></cover-image>
				<cover-view class="title h5">时间到!</cover-view>
				<cover-view class="button-error  flex flex-center">
					<cover-image class="replay" @click="playAudio(WEBCONFIG.audio.beat);replay()" :src='WEBCONFIG.replay_image'>
					</cover-image>
				</cover-view>
			</cover-view>
		</cover-view>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<uni-popup ref="popupSuccess" :is-mask-click='false'>
			<view class="tt-success">
				<image class="tt-bg-image" :src="WEBCONFIG.success_image"></image>
				<view class="tt-title h5">通关用时:{{victorySecond}}s</view>
				<view class="tt-button flex flex-x-space-between">
					<image class="tt-replay" @click="playAudio(WEBCONFIG.audio.beat);replay()" :src='WEBCONFIG.re_image'>
					</image>
					<image class="tt-next" @click="playAudio(WEBCONFIG.audio.beat);next()" :src='WEBCONFIG.next_image'>
					</image>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popupError" :is-mask-click='false'>
			<view class="tt-success">
				<image class="tt-bg-image" :src="WEBCONFIG.error_image"></image>
				<view class="tt-title h5">时间到!</view>
				<view class="tt-button-error  flex flex-center">
					<image class="tt-replay" @click="playAudio(WEBCONFIG.audio.beat);replay()" :src='WEBCONFIG.replay_image'>
					</image>
				</view>
			</view>
		</uni-popup>
		<!-- #endif -->


		<!-- #ifdef MP-WEIXIN -->
		<view class="ad" v-if="WEBCONFIG.weixin_banner_status && WEBCONFIG.weixin_banner_status == 1">
			<ad :unit-id="WEBCONFIG.weixin_banner_ad_id" ad-theme="white"></ad>
		</view>
		<!-- #endif -->

		<!-- #ifdef MP-TOUTIAO -->
		<view class="ad" v-if="WEBCONFIG.douyin_banner_status && WEBCONFIG.douyin_banner_status == 1">
			<ad :unit-id="WEBCONFIG.douyin_banner_ad_id" ad-theme="white"></ad>
		</view>
		<!-- #endif -->

	</view>
</template>

<script lang="ts" setup>
	import { onLoad, onUnload, onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { $http, createAudio } from '@/utils';
	import { initAd } from '@/utils/ad'
	import { useWebConfigStore, useRefs } from "@/stores";

	const AudioContext = uni.createInnerAudioContext();

	const webConfigStore = useWebConfigStore();
	const { WEBCONFIG } = useRefs(webConfigStore);
	let ctx : any = null
	let ctx1 : any = null
	interface coordinateInterface {
		h : number,
		w : number,
		x : number,
		y : number,
		tip : string
	}
	interface err {
		x : number,
		y : number
	}
	//定义格式
	interface itemInterface {
		text : string,
		play : boolean,
		class : string,
		answer : boolean
	}
	//格式
	let coordinates : coordinateInterface[] = [];
	const selected : coordinateInterface[] = []
	//微信弹窗
	// #ifdef MP-WEIXIN
	const popupRefSuccess = ref(false)
	const popupRefError = ref(false)
	// #endif
	// 抖音弹窗
	// #ifdef MP-TOUTIAO
	const popupSuccess = ref()
	const popupError = ref()
	// #endif
	//图片缩放比例
	const proportion = ref(1)
	//游戏详情
	const game = ref({
		level: 0,
		title: ''
	})
	//定义倒计时
	const timeVal = ref()
	//用户输入答案
	const answerText = ref('')
	//错误1
	const errorArr : err[] = []
	//错误2 
	const errorArr1 : err[] = []
	//记录
	const recordArr : [] = []
	//倒计时
	const countdownSecond = ref(60)
	//通关时间
	const victorySecond = ref(0)
	//系统参数
	const system = uni.getSystemInfoSync()
	//关卡信息
	const form = ref({
		types: 0,
		level: 0
	})
	//扣除秒数
	const deduct = ref(3)
	//选择类型
	const type = ref(0)
	//图片信息
	const imageInfo : any = ref({
		height: 0,
		width: 0
	})
	//对比图信息
	const imageInfo1 : any = ref({
		height: 0,
		width: 0
	})
	//流量主信息
	const ad = initAd()
	//平台根 向下取
	const rowNum = ref(2);
	//动画
	const show = ref(false)
	//列表数据  循环生成
	const dataList = ref<itemInterface[]>([])
	//选项
	const option = ref()
	//提示
	const tips = ref('')
	onUnload(() => {
		clearCountdown()
		AudioContext.destroy();
	})
	onLoad((option : any) => {
		if (option) {
			form.value = option
			switch (+option.types) {
				case 1:
					// #ifdef MP-WEIXIN
					ctx = wx.createCanvasContext('canvasId')
					// #endif
					// #ifdef MP-TOUTIAO
					ctx = tt.createCanvasContext('canvasId')
					// #endif
					break;
				case 2:
					// #ifdef MP-WEIXIN
					ctx = wx.createCanvasContext('canvasId')
					ctx1 = wx.createCanvasContext('canvasIds')
					// #endif

					// #ifdef MP-TOUTIAO
					ctx = tt.createCanvasContext('canvasId')
					ctx1 = tt.createCanvasContext('canvasIds')
					// #endif
					break;
			}
			getDetail()
		}
	})



	const back = () => {
		uni.navigateBack()
	}
	//获取广告
	const showInsertAd = () => {
		ad.showInterstitial().catch((a) => { console.log(a) })
	}
	const playAd = (val : number) => {
		let info = game.value
		type.value = val
		if (info.free == 1) {
			clearCountdown()
			ad.show().then((status : any) => {
				if (status && status.isEnded || status === undefined) {
					let platformType = 'weixin';
					// #ifdef MP-TOUTIAO
					platformType = 'douyin'
					// #endif
					$http.get('Ad/count', { data: { types: platformType } }).catch(() => { })
					executed();
				}
			}).catch((err) => {
				if (err == undefined) {
					executed();
				}
			})
		} else {
			executed();
		}
	}
	const executed = () => {
		if (type.value == 1) {
			let tip = ''
			switch (+form.value.types) {
				case 1:
				case 2:
					for (let i = 0; i < coordinates.length; i++) {
						if (!recordArr.includes(i)) {
							tip = coordinates[i]['tip']
							break;
						}
					}
					break;
				case 3:
					tip = tips.value
					break;
				case 4:
				case 5:
				case 6:
				case 7:
				case 8:
					tip = game.value.analysis
					break;
			}
			uni.showModal({
				title: '温馨提示',
				content: tip
			})
		} else {
			gameSuccess()
		}
		countdown()
	}
	//重玩本关
	const replay = () => {
		// #ifdef MP-WEIXIN
		popupRefSuccess.value = false
		popupRefError.value = false
		// #endif

		// #ifdef MP-TOUTIAO
		popupSuccess.value.close()
		popupError.value.close()
		// #endif

		selected.length = 0
		recordArr.length = 0
		switch (+form.value.types) {
			case 1:
				loadImageDraw(game.value.image, ctx, imageInfo, true, game.value.answer)
				break;
			case 2:
				loadImageDraw(game.value.image, ctx, imageInfo, true, game.value.answer)
				loadImageDraw(game.value.image1, ctx1, imageInfo1, false, [])
				break;
			case 3:
				show.value = false
				setTimeout(() => {
					setData()
				}, 500)
				break;
		}
		answerText.value = ''
		countdownSecond.value = game.value.second
		countdown()
	}
	//下一关
	const next = () => {
		selected.length = 0
		recordArr.length = 0
		form.value.level = +form.value.level + 1
		answerText.value = ''
		getDetail()
		clearCountdown()
		// #ifdef MP-WEIXIN
		popupRefSuccess.value = false
		// #endif

		// #ifdef MP-TOUTIAO
		popupSuccess.value.close()
		// #endif
	}
	//获取关卡详情
	const getDetail = () => {
		$http.get('Game/detail', { data: form.value }).then((res : any) => {
			let info = res.data
			game.value = info
			switch (+info.types) {
				case 1:
					loadImageDraw(res.data.image, ctx, imageInfo, true, res.data.answer)
					break;
				case 2:
					loadImageDraw(res.data.image, ctx, imageInfo, true, res.data.answer)
					loadImageDraw(res.data.image1, ctx1, imageInfo1, false, [])
					break;
				case 3:
					setData()
					break;
				case 8:
					option.value = info.option
					break;
			}
			countdownSecond.value = res.data.second
			deduct.value = WEBCONFIG.value.game_system.deduct
			countdown()
		})
		showInsertAd()
	}

	//设置数据
	const setData = () => {
		const num = game.value.num;
		const text = game.value.text;
		const misprint = game.value.misprint;
		const randomInt = Math.floor(Math.random() * num) + 1;
		const newDataList = [];
		const colNumValue = Math.floor(Math.sqrt(num)) > 8 ? 8 : Math.floor(Math.sqrt(num));
		for (let i = 0; i < num; i++) {
			const play = false;
			const answer = i + 1 === randomInt;
			const item = {
				text: answer ? misprint : text,
				play,
				class: answer ? 'success' : 'error',
				answer,
			};
			newDataList.push(item);
		}
		//计算行数
		const tipRowNumValue = Math.ceil(randomInt / colNumValue);
		tips.value = '在第' + tipRowNumValue + '行'
		rowNum.value = colNumValue;
		dataList.value = newDataList;
		show.value = true
	}

	//提交答案
	const submitAnswer = () => {
		const text = answerText.value
		const answer = game.value.answer
		if (text == '') {
			return;
		}
		$http.get('Game/textCensor', { data: { text: text } }).then(res => {
			if (text === answer) {
				gameSuccess()
			} else {
				 playAudio(WEBCONFIG.value.audio.error);
				uni.showToast({
					title: text + '错误！',
					icon: 'error'
				})
				answerText.value = ''
			}
		})
		answerText.value = ''
	}

	//获取点击范围
	const getArr = (arr : any) => {
		coordinates.length = 0
		const p = proportion.value
		for (let i = 0; i < arr.length; i++) {
			coordinates.push({
				w: arr[i]['w'] * p,
				h: arr[i]['h'] * p,
				x: arr[i]['x'] * p,
				y: arr[i]['y'] * p,
				tip: arr[i]['tip']
			})
		}
	}
	//点击事件 判断是否选中
	const CanvasClick = (event : any) => {
		determine(event, 1)
	}
	//点击事件 判断是否选中
	const Canvas1Click = (event : any) => {
		determine(event, 2)
	}

	//文字游戏点击事件
	const onClick = (item : any, val : number) => {
		dataList.value[val]['play'] = true;
		if (item.answer) {
			// #ifdef MP-TOUTIAO
			popupSuccess.value.open('cneter')
			// #endif
			// #ifdef MP-WEIXIN
			popupRefSuccess.value = true
			// #endif
			gameSuccess()
		} else {
			 playAudio(WEBCONFIG.value.audio.error);
			deductSecond()
		}
		setTimeout(() => {
			dataList.value[val]['play'] = false;
		}, 500);
	}

	//判断
	const determine = (event : any, type : number) => {
		if (errorArr.length > 0 || errorArr1.length > 0) {
			return;
		}
		const { x, y } = event.detail;
		const offsetLeft = event.target.offsetLeft;
		const offsetTop = event.target.offsetTop;
		let state = true
		for (let i = 0; i < coordinates.length; i++) {
			const { x: coordX, y: coordY, w, h, tip } = coordinates[i];
			const widthArr = [coordX + offsetLeft, coordX + offsetLeft + w];
			const heightArr = [coordY + offsetTop, coordY + offsetTop + h];
			if (x >= widthArr[0] && x <= widthArr[1] && y >= heightArr[0] && y <= heightArr[1]) {
				if (!recordArr.includes(i)) {
					selected.push({ x: coordX, y: coordY, w, h, tip });
					recordArr.push(i)
				}
				state = false
			}
		}
		if (state == true) {
			deductSecond()
			 playAudio(WEBCONFIG.value.audio.error);
			if (type == 1) {
				errorArr.push({ x: x - offsetLeft, y: y - offsetTop })
			} else {
				errorArr1.push({ x: x - offsetLeft, y: y - offsetTop })
			}
		}

		selectedDraw(ctx, imageInfo.value, errorArr)
		if (form.value.types == 2) {
			selectedDraw(ctx1, imageInfo1.value, errorArr1)
		}
		//判断是否过关
		if (coordinates.length == selected.length) {
			gameSuccess()
		}

	}

	//扣除倒计时
	const deductSecond = () => {
		countdownSecond.value -= deduct.value
	}

	//画出已选择矩形和错误位置
	const selectedDraw = (canvas : any, image : any, arr : any) => {
		clearCanvas(canvas, image)
		for (let i = 0; i < selected.length; i++) {
			const item = selected[i];
			drawSelectedRectangles(canvas, item);
		}
		for (let i = 0; i < arr.length; i++) {
			Cross(canvas, arr[i]['x'], arr[i]['y'])
		}
		draw(canvas);
	}
	//画叉号
	const Cross = (canvas : any, x : number, y : number) => {
		const size = 8;
		canvas.save();
		canvas.beginPath();
		canvas.setStrokeStyle('red')
		canvas.moveTo(x - size, y - size);
		canvas.lineTo(x + size, y + size);
		canvas.moveTo(x + size, y - size);
		canvas.lineTo(x - size, y + size);
		canvas.stroke();
		setTimeout(() => {
			errorArr.length = 0
			errorArr1.length = 0
			selectedDraw(ctx, imageInfo.value, errorArr)
			if (form.value.types == 2) {
				selectedDraw(ctx1, imageInfo1.value, errorArr1)
			}
		}, 500)
	}

	//过关要执行的操作
	const gameSuccess = () => {
		victorySecond.value = (game.value.second - countdownSecond.value)
		clearCountdown()
		$http.post('Game/record', { data: { id: game.value.id } })
		// #ifdef MP-WEIXIN
		popupRefSuccess.value = true
		// #endif
		// #ifdef MP-TOUTIAO
		popupSuccess.value.open('center')
		// #endif
	}

	//重新绘画
	const clearCanvas = (canvas : any, imageInfo : any) => {
		canvas.clearRect(0, 0, imageInfo.width, imageInfo.height);
		canvas.drawImage(imageInfo.path, 0, 0, imageInfo.width, imageInfo.height);
	}
	//画出选中区域
	const drawSelectedRectangles = (canvas : any, item : any) => {
		canvas.save();
		canvas.setStrokeStyle('red')
		ctx.setLineWidth(2)
		canvas.strokeRect(item.x, item.y, item.w, item.h, canvas)
		canvas.restore();
	}
	//执行绘画
	const draw = (canvas : any) => {
		canvas.draw()
	}

	//图片初始化
	function loadImageDraw(url : string, canvas : any, img : any, isTrue : boolean, arr : any) {
		uni.getImageInfo({

			src: url, success(res) {
				img.value = res
				const p = (system.screenWidth - 36) / img.value.width;
				img.value.height = img.value.height * p
				img.value.width = img.value.width * p
				canvas.save();
				canvas.clearRect(0, 0, img.value.width, img.value.height);
				canvas.drawImage(img.value.path, 0, 0, img.value.width, img.value.height)
				canvas.draw()
				if (isTrue) {
					proportion.value = p
					getArr(arr)
				}
			}

		})

	}

	//暂停倒计时
	const clearCountdown = () => {
		clearTimeout(timeVal.value)
	}
	//倒计时初始化
	const countdown = () => {
		clearCountdown()
		timeVal.value = setInterval(() => {
			if (countdownSecond.value > 0) {
				countdownSecond.value--
			} else {
				// #ifdef MP-WEIXIN
				popupRefError.value = true
				// #endif
				// #ifdef MP-TOUTIAO
				popupError.value.open('center')
				// #endif
				clearCountdown()
			}
		}, 1000)
	}

	//分享
	onShareTimeline(() => {
		return $page.shareTimeline({
			path: '/pages/index/index'
		})
	})

	onShareAppMessage(() => {
		return $page.shareMessage({
			path: '/pages/index/index'
		})
	})
	const playAudio = ((src : string) => {
		if (AudioContext.paused == false) {
			AudioContext.stop()
		} else {
			AudioContext.src = src
			AudioContext.play()
		}
	})
</script>
<style lang="scss">
	.container {
		min-height: 100vh;
		background: linear-gradient(180deg, #E4FBA3 0%, #3DB722 100%);
		padding: 9px;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.el-row {
		width: 100% !important;
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.content {
		width: auto;
		height: auto;
		background-color: rgba(255, 255, 255, 0.7);
		border: 2rpx solid #000;
		border-radius: 40rpx;
	}


	.topic-item-2 {
		width: 100rpx;
		height: 100rpx;
		background-color: #bbef88;
		border-radius: 30px;
		border: 3rpx solid #000;
		z-index: 99;

		.item-2-level {
			width: 84rpx;
			height: 84rpx;
			border-radius: 30px;
			background-color: #0c1b2e;
		}
	}

	.topic-item-3 {
		letter-spacing: 2px;
		background-color: #FEE238;
		border-radius: 10rpx;
		border: 2rpx solid #000;
	}

	.tt-success {
		.tt-bg-image {

			width: 526rpx;
			height: 530rpx;
			background-repeat: no-repeat;
			background-size: cover;
			z-index: 100;
		}

		.tt-button {
			z-index: 101;
			position: relative;
			top: -280rpx;
			width: 450rpx;
			height: 100rpx;
			margin: 0 auto;
			padding-top: 100rpx;

			.tt-replay {
				width: 90rpx;
				height: 90rpx;
			}

			.tt-next {
				width: 326rpx;
				height: 88rpx;
			}
		}

		.tt-title {
			position: relative;
			top: -280rpx;
			text-align: center;
			z-index: 101;
		}

		.tt-button-error {
			z-index: 101;
			width: 100%;
			position: relative;
			top: -180rpx;

			.tt-replay {
				width: 384rpx;
				height: 88rpx;
			}
		}
	}

	.popup {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99;
		position: fixed;
		left: 0;
		top: 0;
	}

	.correctpopup {
		width: 526rpx;
		height: 530rpx;
		margin: auto;

		.button-error {
			z-index: 101;
			width: 100%;
			position: relative;
			top: -180rpx;

			.replay {
				width: 384rpx;
				height: 88rpx;
			}
		}

		.bg-image {
			background-repeat: no-repeat;
			background-size: cover;
			z-index: 100;
		}

		.title {
			position: relative;
			top: -280rpx;
			text-align: center;
			z-index: 101;
		}

		.button {
			z-index: 101;
			position: relative;
			top: -280rpx;
			width: 450rpx;
			height: 100rpx;
			margin: 0 auto;
			padding-top: 100rpx;

			.replay {
				width: 90rpx;
				height: 90rpx;
			}

			.next {
				width: 326rpx;
				height: 88rpx;
			}

		}
	}

	.friend {
		width: 300rpx;
		height: 240rpx;

	}

	.tips {
		width: 303rpx;
		height: 240rpx;

	}

	.item {
		padding: 3px;

		.item-text {
			width: 36px;
			height: 36px;
			border-radius: 10rpx;
			font-weight: 500;
			// padding: 5px;
			font-size: 22px;
			background-image: linear-gradient(to bottom, #4eacc5, #72d1ea);
		}
	}

	.grid-sqrt-2 {
		grid-template-columns: repeat(2, minmax(0px, 1fr));
	}

	.grid-sqrt-3 {
		grid-template-columns: repeat(3, minmax(0px, 1fr));
	}

	.grid-sqrt-4 {
		grid-template-columns: repeat(4, minmax(0px, 1fr));
	}

	.grid-sqrt-5 {
		grid-template-columns: repeat(5, minmax(0px, 1fr));
	}

	.grid-sqrt-6 {
		grid-template-columns: repeat(6, minmax(0px, 1fr));
	}

	.grid-sqrt-7 {
		grid-template-columns: repeat(7, minmax(0px, 1fr));
	}

	.grid-sqrt-8 {
		grid-template-columns: repeat(8, minmax(0px, 1fr));
	}

	.grid-sqrt-9 {
		grid-template-columns: repeat(9, minmax(0px, 1fr));
	}


	.error {
		position: relative;
		display: inline-block;
	}

	.error:before {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: red;
		content: '\2716';
		font-size: 28px;
		animation-name: fadeOut;
		animation-duration: 1s;
		animation-fill-mode: forwards;
	}

	.success {
		position: relative;
		display: inline-block;
	}

	.success:before {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: green;
		content: '\2714';
		font-size: 28px;
		animation-name: fadeOut;
		animation-duration: 1.5s;
		animation-fill-mode: forwards;
	}

	@keyframes fadeOut {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.btn {
		padding: 16rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.footer {
		width: 80%;
		margin: 0 auto;

		.btn {
			padding: 20rpx;
			border-radius: 10rpx;
		}

		.tip {
			background-color: #6dabd7;
		}

		.refresh {
			background-color: #ebbe82;
		}

		.jump {
			background-color: #a4cad1;
		}
	}

	.second {
		color: red;
	}

	.option {
		border: 2rpx solid #000;
		border-radius: 10rpx;
		background-color: #f1d0a1;
	}

	.answer {
		text-align: center;
		height: 102rpx;
		border: 2rpx solid #000000;
		background: #FCF8E7;
		border-radius: 50rpx;
	}

	.sub-btn {
		background-color: #4ca8be;
	}
</style>